<template>
  <div>
    <el-table :data="list"  fit highlight-current-row style="width: 100%" v-loading="loading">
      <el-table-column width="300" align="center" prop="promotionCode" label="活动ID"></el-table-column>
      <el-table-column width="240" align="center" prop="promName" label="活动名称"></el-table-column>
      <el-table-column width="360" align="center" label="活动时间">
        <template slot-scope="scope">
          <span>{{scope.row.startTime}}至{{scope.row.endTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" label="活动类型">
        <template slot-scope="scope">
          <span>{{genFrontPromType(scope.row.frontPromType)}}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" prop="status" label="活动状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 9">草稿状态</span>
          <span v-if="scope.row.status == 1">待提交</span>
          <span v-else-if="scope.row.status == 2">待审核</span>
          <span v-else-if="scope.row.status == 3">未开始</span>
          <span v-else-if="scope.row.status == 4">
            审核不通过
            <el-tooltip effect="dark" :content="scope.row.auditRemark" placement="right">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <span v-else-if="scope.row.status == 5">进行中</span>
          <span v-else-if="scope.row.status == 6">已过期</span>
          <span v-else-if="scope.row.status == 7">已关闭</span>
          <span v-else-if="scope.row.status == 8">已结束</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center" label="活动渠道" >
        <template slot-scope="scope">
          <span>{{scope.row.channelCodes}}</span>
        </template>
      </el-table-column>
      <el-table-column width="240" align="center" prop="creatorName" label="创建人"></el-table-column>
      <el-table-column width="240" align="center" prop="createTime" label="创建时间"></el-table-column>

      <!--      <el-table-column class-name="status-col" align="center" label="实际参与人数" width="170">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ scope.row.numOfparticipants }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column class-name="status-col" align="center" label="实际投入成本" width="170">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ scope.row.inputCost }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column class-name="status-col" align="center" label="实际营销额" width="170">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ scope.row.marketingAmount }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column class-name="status-col" align="center" label="实际核销数" width="170">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ scope.row.writeOff}}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column width="390" class-name="status-col" label="操作" align="left" fixed="right">
        <template slot-scope="scope">
          <span v-if="[3,5].includes(scope.row.status)  && scope.row.editFlag">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <kt-button
              type="text"
              class="textButton"
              @click="copyBtnShow(scope.row.id)"

              label="复制"
            />
            <kt-button
              type="text"
              class="textButton"
              @click="closeActivity(scope.row)"
              label="关闭"

            />
            <!--            <el-button type="text" class="textButton" @click="viewMarketingReport(scope.row)">查看营销报告</el-button>-->
          </span>
          <span v-else-if="[9].includes(scope.row.status)  && scope.row.editFlag">
            <kt-button
              type="text"
              class="textButton"
              @click="updateBtnShow(scope.row)"

              label="编辑"
            />
            <kt-button
              type="text"
              class="textButton"
              @click="deleteActivity(scope.row.id)"

              label="删除"
            />
          </span>
          <!--  perms="market:gift:copy" -->
          <span v-else-if="[2,6,7,8].includes(scope.row.status)  && scope.row.editFlag">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <kt-button
              type="text"
              class="textButton"
              @click="copyBtnShow(scope.row.id)"

              label="复制"
            />
            <!--            <el-button type="text" class="textButton" @click="viewMarketingReport(scope.row)">查看营销报告</el-button>-->
          </span>
          <span v-else-if="[4].includes(scope.row.status) && scope.row.editFlag">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <kt-button
              type="text"
              class="textButton"
              @click="copyBtnShow(scope.row.id)"

              label="复制"
            />
            <kt-button
              type="text"
              class="textButton"
              @click="updateBtnShow(scope.row)"

              label="编辑"
            />
          </span>
          <span v-else-if="[1].includes(scope.row.status)  && scope.row.editFlag">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <kt-button
              type="text"
              class="textButton"
              @click="copyBtnShow(scope.row.id)"

              label="复制"
            />
            <kt-button
              type="text"
              class="textButton"
              @click="updateBtnShow(scope.row)"

              label="编辑"
            />
            <kt-button
              type="text"
              class="textButton"
              @click="deleteActivity(scope.row.id)"

              label="删除"
            />
          </span>
          <span v-else-if="!scope.row.editFlag">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="refreshPageRequest"
        :current-page="listQuery.pageNo"
        :page-size="listQuery.pageSize"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    promTypeConverter,
    frontPromTypeConverter,
    channelCodeConverter
  } from "@/market/dict/marketDict";

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger"
        };
        return statusMap[status];
      }
    },
    props: {
      type: {
        type: String,
        default: "0"
      },
      parentFilters: {
        type: Object
      }
    },
    data() {
      return {
        list: [],

        listQuery: {
          pageNo: 1,
          pageSize: 10,
          status: this.type,
          sort: "+id"
        },
        loading: false,
        totalSize: 0
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        this.$emit("create"); // for test
        let _filters = JSON.parse(JSON.stringify(this.parentFilters));

        _filters["pageNo"] = this.listQuery.pageNo;
        _filters["pageSize"] = this.listQuery.pageSize;
        _filters["status"] = this.listQuery.status;
        if (_filters.status == "0") {
          _filters.status = "";
        }
        let this_ = this;
        this.utils.request.promotionList(_filters, function(res) {
          if (res.code == "0000") {
            this_.list = res.data.list;
            this_.totalSize = res.data.totalCount;
          } else {
            //请求失败，展示mock数据
            var key = "status" + this_.listQuery.status;
            //this_.list = this_.tableList[key];
          }
          this_.loading = false;
        });

        // })
      },
      //查看
      seeNewTab: function(val) {
        //this.$router.push("/QueryPromotion");
        this.$router.push(`/ComplexPromotionDetail?id=${val.id}&auth=0`);
      },
      //复制
      copyBtnShow: function(id) {
        let that = this;
        this.$confirm("确定要复制该活动？", "提示", {
          type: "warning",
          closeOnClickModal: false,
        })
          .then(() => {
            marketRequest.promotionDeepCopy(
              { id: id },
              res => {
                that.$message({ message: "复制成功", type: "success" });
                that.getList();
              }
            );
          })
          .catch(() => {});
        // const loading = this.$loading({
        //   lock: true,
        //   text: "Loading",
        //   spinner: "el-icon-loading",
        //   background: "rgba(0, 0, 0, 0.7)"
        // });
        // let this_ = this;
        // let param = { id: id };
        // this.utils.request.promotionCopyById(param, function(res) {
        //   if (res.code == "0000") {
        //     this_.getList();
        //     loading.close();
        //   }
        // });
      },
      //关闭
      closeActivity: function() {
        this.$confirm("是否确认关闭活动？", "提示", {
          type: "warning",
          closeOnClickModal: false,
        })
          .then(() => {
            this.$message({ message: "活动已关闭 ", type: "success" });
          })
          .catch(() => {});
      },
      //关闭或者删除
      updatePromotionStatus: function(id, status) {
        let this_ = this;
        let params = { id: id, status: status };
        this.utils.request.promotionList(params, function(res) {
          if (res.code == "0000") {
            this_.getList();
          } else {
            alert("更新失败");
          }
        });
      },
      //删除
      deleteActivity: function(id) {
        let this_ = this;
        let params = { id: id };
        this.utils.request.promotionDelete(params, function(res) {
          if (res.code == "0000") {
            this_.getList();
          } else {
            alert("更新失败");
          }
        });
      },
      updateBtnShow: function(val) {
        this.$router.push(`/ComplexPromotionCreate/${val.id}/1`);
      },
      //追加商品
      appendMerchantProduct: function(val) {
        //this.$router.push("/AdditionProduct");
        this.$router.push(`/ComplexPromotionCreate/${val.id}/3`);
      },
      //查看营销报告
      viewMarketingReport: function() {
        this.$router.push("/MarketingReport");
      },
      // 换页刷新-pageNo
      refreshPageRequest: function(pageNum) {
        this.listQuery.pageNo = pageNum;
        this.getList();
      },
      // 换页刷新-pageSize
      handleSizeChange: function(pageSize) {
        this.listQuery.pageSize = pageSize;
        this.listQuery.pageNo = 1;
        this.getList();
      },
      genFrontPromType: function(type) {
        return frontPromTypeConverter(type);
      },
      genChannelCode: function(code) {
        return channelCodeConverter(code);
      },
      //查看分析
      viewAnalysi() {
        this.$router.push('/SecKillPromotionDetail')
        //
      },
      //二次营销
      SecondSell() {
        //
        this.$emit('SecondSell')
      }
    }
  };
</script>
<style scoped>
  .textButton {
    margin-left: 1px;
  }
</style>

